<template>
	<div>
		<el-container>
			<el-aside width=220px style="background-color: #ffffff;border: 1px solid #eee">
				<el-menu :default-openeds="index">
					<el-submenu index="1" @click="one">
						<template slot="title"><i class="el-icon-s-custom"></i>用户管理</template>
						<el-menu-item-group>
							<el-menu-item index="1-1" v-on:click="userList">用户列表</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					<el-submenu index="2" @click="two">
						<template slot="title"><i class="el-icon-menu"></i>系统管理</template>
						<el-menu-item-group>
							<el-menu-item index="2-1" v-on:click="NewsList">新闻管理</el-menu-item>
							<el-menu-item index="2-2" v-on:click="QuestionnairesList">问卷管理</el-menu-item>
							<el-menu-item index="2-3" v-on:click="psychology">心理短句</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
				</el-menu>
			</el-aside>

			<el-container>
				<el-header>
					<el-row :gutter="3">
						<el-col :span="8"><span>&nbsp;</span></el-col>
						<el-col :span="8" >
							<div style="text-align: center">
								<span style="font-size:30px; display: inline" >心云后台管理系统</span>
							</div>
						</el-col>
						<el-col :span="8">
							<div style="text-align: right">
								<el-dropdown style="margin-right: 20px">
									<span style="float: right">{{user_name}}</span>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item>退出登录</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</el-col>
					</el-row>
				</el-header>

				<el-main>
					<router-view/>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
export default {
	name: "Main",
	props:["user_name"],
	data() {
		return {
			username:"蓝沫",
			index: ['1-1'],
		}
	},
	methods:{
		userList(){
			this.$router.replace({path: '/userList'});
		},
		NewsList(){
			this.$router.replace({path: '/NewsList'});
		},
		psychology(){
			this.$router.replace({path: '/psychology'});
		},
		QuestionnairesList(){
			this.$router.replace({path: '/QuestionnairesList'});
		},
		one(){
			this.index=['1']
		},
		two(){
			this.index=['2']
		}
	}

}
</script>
<style scoped>

html,body,el-container{
	background: #fff;
	height: 100%;
}
.el-container{
	height: 100%;
}
.el-header {
	background-color: #B3C0D1;
	color: #333;
	line-height: 60px;
}

.el-aside {
	color: #333;
}
#text{
	font-size:20px;
	text-align: center;
}
</style>
